<template>
  <el-tabs type="border-card">
    <el-tab-pane label="api-def.json">
      <el-input type="textarea" v-model="$data.apiDefInput" :autosize="{ minRows: 12, maxRows: 18 }"></el-input>
    </el-tab-pane>
    <el-tab-pane label="api-def-mapping.json">
      <el-input type="textarea" v-model="$data.paramInput" :autosize="{ minRows: 12, maxRows: 18 }"></el-input>
    </el-tab-pane>
    <el-tab-pane label="dict-mapping.json">
      <el-button @click="gen_click()">生成</el-button>
      <el-input type="textarea" v-model="$data.dictMapString" :autosize="{ minRows: 12, maxRows: 18 }"></el-input>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>

const showJson = obj => {
  return JSON.stringify(obj.toKeySortedJson(), null, '  ')
}

// 定义选项
defineOptions({
  name: "apiDefCom",
  inheritAttrs: false,
});


const $props = defineProps({
  level: {type: Number, default: 1},
  app: {type: String, default: ""},
  productLineCode: {type: String, default: ""}
});


//定义data
const $data = reactive({
  apiDefInput: "",
  paramInput: "",
  apiDef: {},
  param: {},
  dictMapString: "",
})
var mapped = {};
var dict = [];


const gen_click = () => {
  $data.apiDef = Object.values(JSON.parse($data.apiDefInput))[0];
  $data.param = JSON.parse($data.paramInput);


  var map = {};

  var fillkv = (key, value) => {
    var k1 = key.getKebabCase().replace(/(\d+)/g,"-").replace("--","-").split("-").filter(it => it)
    var k2 = value.getKebabCase().replace(/(\d+)/g,"-").replace("--","-").split("-").filter(it => it)

    if (k1.length != k2.length) {
      return;
    }

    var len = k1.length;
    for (var i = 0; i < len; i++) {
      var s1 = k1[i];
      var s2 = k2[i];

      map[s1] = s2;
    }
  }

  Object.keys($data.apiDef).forEach((key) => {
    var value = $data.apiDef[key];

    fillkv(key, value);
  });


  Object.keys($data.param).forEach((key) => {
    var value = $data.param[key];

    fillkv(key, value);
  });


  $data.dictMapString = showJson(map);

  // jv.$http.post("/dev/api-define/list", {productLine: $props.productLineCode, app: $props.app}).then(res => {
  //   var apis = res.data.data;
  //
  //   apis = apis.filter(it => it.url.IsIn($data.apiDef))
  //
  //   $data.doc = genDoc(apis);
  // });


}


</script>